<template>
  <el-card :title="title" shadow="never">
    <iep-table
      :columnsMap="columnsMapProduct"
      :dictsMap="dictsMap"
      :isLoadTable="false"
      :pagedTable="[form]"
      :is-pagination="false"
    >
    </iep-table>
    <div class="footer">
      <div>
        <span>原价：</span>
        <span>{{moneyJoin(form.priceAmount,form.cashAmount)}}</span>
      </div>
      <div>
        <span>实付金额：</span>
        <span>{{realPay(form)}}</span>
      </div>
    </div>
  </el-card>
</template>
<script>
import { columnsMapProduct, statusColor, jumpPath } from '../options'
const payUnit = {
  price: '贝',
  cash: '元'
}
export default {
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      columnsMapProduct,
      dictsMap: {},
      title: '商品信息'
    }
  },
  methods: {
    moneyJoin (price = 0, cash = 0) {
      const arr = []
      price && arr.push(price + payUnit['price'])
      cash && arr.push(cash + payUnit['cash'])
      return arr.join('/') || '0贝/0元'
    },
    realPay (row) {
      const price = row.paymentMethod === '1'
      const cash = row.paymentMethod === '2'
      if (row.status === '1' && (price || cash)) {
        if (price) return row.discountPrice + '贝'
        if (cash) return row.discountCash + '元'
      }
      return this.moneyJoin(row.discountPrice, row.discountCash)
    },
    orderStatus (status) {
      const obj = {
        // label: dictsMap.status[status] || '暂无',
        label: '暂无',
        value: status,
        color: statusColor[status] || '#666769'
      }
      return obj
    },
    handleClick ({ orderType, goodsId, activityId }) {
      if (jumpPath[orderType]) {
        const path =
          jumpPath[orderType] + (orderType === '1' ? goodsId : activityId)
        this.$openPage(path)
      } else {
        this.$message({ message: '订单类型错误', type: 'info' })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  color: #919397;
  margin-top: 10px;
  & > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    margin-bottom: 10px;
    line-height: 24px;
    & > span:first-of-type {
      text-align: right;
    }
    & > span:last-of-type {
      min-width: 100px;
    }
    &:last-of-type {
      margin-bottom: 0;
      & > span:last-of-type {
        font-size: 16px;
        font-weight: 900;
        color: #f74437;
      }
    }
  }
}
</style>
